<template>
  <div class="table_container compare_target_table">
    <el-table
      :height="tableMaxHeight - 40"
      :data="tableData"
      style="width: 100%"
      border
      tooltip-effect="dark">
      <el-table-column
        prop="workorderNumber"
        show-overflow-tooltip
        align="center"
        label="工单编号">
      </el-table-column>
      <el-table-column
        prop="materialName"
        show-overflow-tooltip
        label="物料名称">
      </el-table-column>
      <el-table-column
        prop="workstageName"
        show-overflow-tooltip
        label="工序名称">
      </el-table-column>
      <el-table-column
        prop="summary"
        label="工序简述"
        show-overflow-tooltip
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="name"
        show-overflow-tooltip
        label="参数项目">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        align="center"
        min-width="60"
      >
        <template slot-scope="scope">
          {{templateValueType.find(v => v.id === scope.row.type).label}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        :resizable="false"
        align="center"
        class-name="cell_no_padding"
        min-width="40">
        <template slot-scope="scope">
          <span class="jump_item" @click.stop="handleDelete(scope.$index)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom_operate mes_btn">
      <el-button
        :disabled="tableData.length === 0"
        @click="handleClear"
        size="mini">
        清空
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompareTargetTable',
  data() {
    return {
      tableData: [],
    }
  },
  computed: {
    templateValueType() {
      return this.$store.state.dict.TemplateValueType.labels || []
    }
  },
  methods: {
    clear() {
      this.tableData = []
    },
    handleAdd(list) {
      // 保持选中状态，需要push，不能直接数组合并
      list.forEach(v => {
        this.tableData.push(v)
      })
      this.checked = false
    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
      this.$emit('delete')
    },
    handleClear() {
      this.tableData = []
      this.$emit('delete')
    },
  }
}
</script>

<style lang="less" scoped>
  .compare_target_table {
    .bottom_operate {
      height: 39px;
      padding: 0 10px;
      line-height: 39px;
      border: 1px solid #ebeef5;
      border-top: none;
      .el-button {
        height: 22px;
        width: 60px;
        min-width: 60px;
        padding: 0 6px;
        line-height: 20px;
        font-size: 12px;
        color: #333333;
      }
    }
  }
</style>
